<template>
  <div class="new-disc">
    <div  v-if="newAlbumsData.length > 0">
      <page-list-layout>
        <template v-slot:one>
          <home-nav
              title="热门新碟"
              :more="false"
          >
          <span
              @click="getAlbumType(tag.type)"
              v-for="tag in allTags"
              :key="tag.type"
              class="tags ml-4 mr-4"
              :class="hoverTransition"
          >
          {{ tag.title }}
         </span>
          </home-nav>
          <song-list-layout
              :playlists="newAlbumsData"
              @jumpPlayListDetails="jumpPlayListDetails"
          />
        </template>
        <template v-slot:two>
          <div v-if="allLoading">
            <home-nav
                v-if="store.isFlag"
                title="全部新碟"
                :more="false"
            >
              <template v-slot:tags>
             <span
                 @click="getAlbumType(tag.type)"
                 v-for="tag in allTags"
                 :key="tag.type"
                 class="tags ml-4 mr-4"
                 :class="[hoverTransition, tag.type === activeAlbumsType ? 'yu-textColor-active' : '']"
             >
              {{ tag.title }}
             </span>
              </template>
            </home-nav>

            <van-dropdown-menu v-else class="w-full mb-1">
              <van-dropdown-item ref="dropdownItem" title="热门推荐" v-model="mobileNavigation">
                <van-cell class="text-center" :title="tag.title" v-for="tag in allTags" :key="tag.type"
                          @click="getAlbumType(tag.type)"></van-cell>
              </van-dropdown-item>
            </van-dropdown-menu>

            <song-list-layout
                :playlists="allAlbumInfo.allAlbumData"
                @jumpPlayListDetails="jumpPlayListDetails"
            />
            <van-pagination
                class="van-pagination"
                v-model="currentPage"
                :total-items="allAlbumInfo.total"
                :items-per-page="20"
                :show-page-size="6"
                force-ellipses
                @change="pageChange"
            >
              <template #prev-text>
                <van-icon name="arrow-left"/>
              </template>
              <template #next-text>
                <van-icon name="arrow"/>
              </template>
              <template #page="{ text }">{{ text }}</template>
            </van-pagination>
          </div>
          <loading v-else/>

        </template>
        <template v-slot:top>
          <user-info/>
        </template>
      </page-list-layout>
    </div>
    <loading v-else/>
  </div>
</template>

<script setup>
import PageListLayout from '@/components/PageListLayout/index.vue'
import HomeNav from '@/components/HomeNav/index.vue'
import SongListLayout from '@/components/SongListLayout/index.vue'
import UserInfo from '@/components/UserInfo/index.vue'

import {useStore} from "@/store/index"
import {reactive, toRefs, ref} from "vue"
import {useRouter} from "vue-router"

const router = useRouter()
const store = useStore()

const data = reactive({
  newAlbumsData: [], // 热门新碟数据
  allLoading: true, // 切换新碟类型loading
  activeAlbumsType: 'ALL', // 活动的新碟标签类型
  allTags: [ // ALL:全部,ZH:华语,EA:欧美,KR:韩国,JP:日本
    {title: '全部', type: 'ALL'},
    {title: '华语欧美', type: 'ZH'},
    {title: '欧美', type: 'EA'},
    {title: '韩国', type: 'KR'},
    {title: '日本', type: 'JP'}
  ],
  hoverTransition: ['transition duration-200 yu-textColor-hover cursor-pointer '],
  allAlbumParams: { // 全部新碟请求参数
    limit: 30, // 返回数量
    num: 0, // 分页
    area: 'ALL' // 类型
  },
  currentPage: 1, // 当前分页
  allAlbumInfo: { // 全部新碟信息
    allAlbumData: [], // 全部新碟数据
    total: 0 // 全部新碟数量
  }

})
// 移动端下拉菜单实例
const dropdownItem = ref(null)

const {
  newAlbumsData,
  allTags,
  hoverTransition,
  allAlbumInfo,
  currentPage,
  activeAlbumsType,
  allLoading
} = toRefs(data)

// 移动端导航
const mobileNavigation = ref(0);

// 全部新碟
const getAlbumNew = () => {
  store.getAlbumNew(data.allAlbumParams).then(res => {
    // 请求成功之后loading设为true(显示卡片)
    data.allLoading = true
    data.allAlbumInfo.allAlbumData = res.albums
    data.allAlbumInfo.total = res.total
    // console.log(res)
  })
}
getAlbumNew()


// 热门新碟数据
store.getAlbumNewest().then(albums => {
  data.newAlbumsData = albums
})

// 跳转到专辑详情页
const jumpPlayListDetails = (id) => {
  router.push({
    path: '/collection-detail',
    query: {
      id
    }
  })
}
// 获取对应地区的新碟
const getAlbumType = (type) => {
  if (!store.isFlag) {
    dropdownItem.value.toggle(false)
  }
  // 收集活动的新碟类型
  data.activeAlbumsType = type
  // loading
  data.allLoading = false
  // 修改请求数据的地区参数
  data.allAlbumParams.area = type
  getAlbumNew()
}

// 分页改变时触发
const pageChange = (value) => {
  // 分页改变时触发loading
  data.allLoading = false
  // 修改偏移量
  data.allAlbumParams.num = value - 1
  // 重新获取数据
  getAlbumNew()
}
</script>

<style lang="scss" scoped>
:deep(.van-pagination) {
  margin-top: 20px;
  .van-pagination__item--prev, .van-pagination__item--next {

  }

  .van-pagination__item--active {
    color: v-bind('store.theme.hoverTextColor') !important;
  }

  .van-pagination__item--page, .van-pagination__item--next, .van-pagination__item--prev {
    color: v-bind('store.theme.textColor');

    button {
      background-color: v-bind('store.theme.HoverBgColor');
    }
  }
}

.van-dropdown-menu {
  position: relative;

  :deep(.van-dropdown-menu__bar) {
    background-color: v-bind('store.theme.HoverBgColor');
  }

  // 不活动的样式
  :deep(.van-dropdown-menu__title) {
    color: v-bind('store.theme.hoverTextColor') !important;
  }

  // 活动的样式
  :deep(.van-ellipsis) {
    color: v-bind('store.theme.textColor');
  }

  .van-dropdown-item {
    position: fixed;
    top: 0;
    left: 10px;
    right: 10px;
    height: 100%;
  }
}
</style>
